<template>
  <div class="swh-starsbox">
    <span
      v-for="number in total"
      :key="number"
      :class="['iconfont swh-starsitem', number <= StarsNum ? 'active' : '']"
      :style="{
        fontSize: size + 'px',
        color: number <= StarsNum ? colorlist[StarsNum - 1] : color,
      }"
      @click="clickStars(number)"
      @mouseover="mouseoverStars(number)"
      @mouseout="mouseoutStars"
    >
      &#xe60a;
    </span>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, watch } from "vue";
export default {
  name: "SwhScore",
  props: {
    color: {
      type: String,
      default: "#ddd",
      explain: "未选中的默认颜色",
      otherVal: "色值",
    },
    activeNum: {
      type: Number,
      default: 0,
      explain: "初始选中的个数",
      otherVal: "---",
    },
    total: {
      type: Number,
      default: 5,
      explain: "总个数",
      otherVal: "---",
    },
    size: {
      //星星大小
      type: Number,
      default: 16,
      explain: "图标尺寸",
      otherVal: "---",
    },
    isCLickActive: {
      //点击才选中星星
      type: Boolean,
      default: false,
      explain: "点击时选中：false移入选中，true点击选中",
      otherVal: true,
    },
    isMouseoverStyle: {
      //移入样式改变
      type: Boolean,
      default: true,
      explain: "移入时改变样式",
      otherVal: false,
    },
    colorArr: {
      //配置颜色
      type: Array,
      default: () => ["red"],
      explain: "颜色数组，单个或多个",
      otherVal: "---",
    },
    readOnly: {
      //是否只读
      type: Boolean,
      default: false,
      explain: "是否禁用",
      otherVal: true,
    },
    getStarsnum: {
      type: Function,
      explain: "监听选中的个数",
    },
  },

  setup(props, ctx) {
    watch(
      // 监听数字变化更新组件星星数量
      () => props.activeNum,
      (val) => {
        data.StarsNum = val > props.total ? props.total : val;
      }
    );
    const infoActiveNum =
      props.activeNum > props.total ? props.total : props.activeNum;
    const data = reactive({
      oldStarsNum: infoActiveNum,
      isClick: false, //是否点击
      StarsNum: infoActiveNum,
      colorlist: props.colorArr, //颜色变化
    });

    onMounted(() => {
      infoColor();
    });
    const infoColor = () => {
      const colorLength = props.colorArr.length;
      const val = props.total - colorLength;
      if (val > 0) {
        for (let i = 0; i < val; i++) {
          data.colorlist.push(props.colorArr[colorLength - 1]);
        }
      }
    };
    // 点击
    const clickStars = (activeNum) => {
      if (!props.readOnly) {
        data.isClick = true;
        data.oldStarsNum = activeNum;
        data.StarsNum = activeNum;
        ctx.emit("getStarsnum", data.StarsNum);
      }
    };
    // 移入事件
    const mouseoverStars = (activeNum) => {
      if (!props.readOnly) {
        if (props.isMouseoverStyle) {
          //取消移入样子
          data.isClick = false;
          data.StarsNum = activeNum;
        }
      }
    };
    //移出事件，点击保留，不点击不选中
    const mouseoutStars = () => {
      if (!props.readOnly) {
        if (props.isCLickActive) {
          //点击才选中取消
          if (!data.isClick) {
            //点击了
            data.StarsNum = data.oldStarsNum; //移入的元素
          }
        } else {
          ctx.emit("getStarsnum", data.StarsNum);
        }
      }
    };
    return {
      mouseoutStars,
      mouseoverStars,
      clickStars,
      ...toRefs(data),
    };
  },
};
</script>
<style lang="less" scoped>
.swh-starsitem {
  margin: 0 1px;
  cursor: pointer;
  transition: 0.3s;
}
.swh-starsbox {
  overflow: hidden;
  caret-color: transparent;
}
</style>
